<template>
  <div id="app">
    <!-- 头 -->
    <Topbar :key="topbarkey"></Topbar>
    <!-- 导航 -->
    <Header></Header>
    <router-view @updatakey="getval" />
    <!-- 内容 -->
    <Footer></Footer>
    <!-- 登录框 -->
    <login v-if="isShowLoginModal"></login>
    <!-- <button @click="fn">放松请求</button> -->
    <!-- <div class="iconfont icon-loading"></div> -->
    <!-- 弹出框 -->
    <transition name="slide">
      <Toast v-show="isShow" />
    </transition>
  </div>
</template>
<script>
import Topbar from "@/components/Topbar"
import Header from "@/components/Header"
import Footer from "@/components/Footer"
import login from "@/components/login"
import Toast from "@/components/Toast"
// import logModal from "./store/showModel/index"

import { jingpinApi } from '@/request/api'
import { mapMutations, mapState } from "vuex"
export default {
  data() {
    return {
      topbarkey: 0
    }
  },
  components: {
    Topbar, Header, Footer, login, Toast
  },
  computed: {
    ...mapState({
      isShowLoginModal: (state) => state.logModal.isShowLoginModal,
      isShow: (state) => state.Toast.isShow
    })
  },
  created() {
    // axios.get("/products/recommend", {
    //   headers: {
    //     token: 123
    //   }
    // }).then((res) => {
    //   console.log("res:", res);
    //   console.log(res.data.data.data.records);
    // })
    jingpinApi().then((res) => {
      console.log("api", res);
      // console.log(res.data.data.data.records);
    })
  },
  methods: {
    async fn() {
      let res = await jingpinApi()
      console.log("api1", res);
      let res2 = await jingpinApi()
      console.log("api2", res2);
    },
    getval() {
      console.log("字传父 更新topbarkey");
      this.topbarkey++
    }
  },
  watch: {
    "$route.path": {
      handler() {
        this.topbarkey++
      }
    }
  }
}
</script>

<style lang="less">
// 进入过渡开始，离开过渡结束
.slide-enter,
.slide-leave-to {
  opacity: 0;
}

// 过程中
.slide-enter-active,
.slide-leave-active {
  transition: opacity .5s linear;
}

.slide-enter-to,
.slide-leave {
  opacity: 1;
}
</style>
